<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/axios.min.js"></script>
  <script src="./js/api.js"></script>
</head>

<body>
  <div id="send-div">
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="button" name="" id="" value="发布" />
  </div>
  <ul>
    <!-- <li>
      <h2>小米</h2>
      <p></p>
      <img src="" alt="" />
    </li> -->
  </ul>
  <script>
    loadList();
    sendFN();

    // 3-删除功能
    // 调用删除接口 ，调用成功后-刷新页面或者 loadList
    async function delFn(pid) {
      console.log("delFn");
      //productDeleteAPI
      //
      let uid = localStorage.getItem("uid");
      let token = localStorage.getItem("token");
      console.log(pid);

      let params = {
        uid,
        token,
        pid
      };
      // 调用删除接口
      let {
        data
      } = await axios.get(productDeleteAPI, {
        params
      });
      console.log(data);
      //  删除成功以后  刷新列表
      loadList();
    }

    // 显示商品列表
    // 2-请求首页列表接口-》服务器返回的数据 -》 ul
    async function loadList() {
      // proudtListAPI
      //         参数
      // pagesize  每页获取几个数据
      // pagenum 获取第几页数据
      // uid  用户id
      let pagesize = 20;
      let pagenum = 0;
      let uid = localStorage.getItem("uid");
      let params = {
        pagenum,
        pagesize,
        uid
      };
      let {
        data
      } = await axios.get(proudtListAPI, {
        params
      });
      console.log(data);
      let productArr = data.data;
      console.log(productArr); //-> li
      let resArr = productArr.map(
        (pObj) => `
        <li>
          <h2>${pObj.pname}</h2>
          <p>${pObj.pprice}</p>
          <img src="${pObj.pimg}" alt="" />
          <button onclick="delFn(${pObj.pid})">删除</button>

          <a href="update.html?pid=${pObj.pid}">修改</a>

        </li>
      `
      );
      console.log(resArr);
      let ul = document.querySelector("ul");
      ul.innerHTML = resArr.join("");
    }

    // 发布功能
    // 1- 发布功能
    /*  给发布按钮添加点击事件，点击的时候获取输入框的值，调用发布接口 */
    function sendFN() {
      //
      // productAddAPI
      //         1.
      // pimg
      //     2.
      // pname
      //     3.
      // pprice
      //     4.
      // pdesc
      //     5.
      // uid  （可选）用户商品
      let ipts = document.querySelectorAll("#send-div input");
      ipts[4].onclick = async function () {
        let pname = ipts[0].value;
        let pprice = ipts[1].value;
        let pimg = ipts[2].value;
        let pdesc = ipts[3].value;
        // let uid = localStorage.getItem("uid");
        let params = {
          pname,
          pprice,
          pimg,
          pdesc,
          uid: 64150
        };
        // id: ""

        // axios.get(productAddAPI, { params }).then((res) => {
        //   let { data } = res;
        //   console.log(data);
        //   alert(data.msg);
        // });

        // get 方法 返回的是一个promise 对象
        // let p = axios.get(productAddAPI, { params });
        // console.log(p);
        // let res = await p;
        // console.log(res.data);

        // try catch  尝试执行try里的代码，一旦报错 就执行catch
        // try {
        //   let { data } = await axios.get(productAddAPI, { params });
        //   console.log(data);
        // } catch (error) {
        //   console.log(error);
        // }

        let {
          data
        } = await axios.get(productAddAPI, {
          params
        });
        //发布成功以后调用loadlist
        loadList();
      };
    }
  </script>
</body>

</html>